const { createApp, ref, watch, computed, reactive } = Vue // 新增 watch 引入

const app = createApp({
  setup() {
    const lang = getUrlParams(location.href)?.lang ?? 'zh_CN' /* TODO: 需要实现从 URL 中获取 lang 的值 */
    const theme = ref(getUrlParams(location.href)?.theme ?? 'light') /* TODO: 需要实现从 URL 中获取 theme 的值 */
    const { t } = createI18nInstance(lang)

    const nationalContest = ref(t('nationalContest'))

    const currentContest = ref(t('currentContest'))

    let menuList = reactive(
      [
        {
          icon: ``,
          titleKey: `menuList.starter`,
          courseNum: "176+",
          descriptionKey: 'menuList.course',
        },
        {
          icon: ``,
          titleKey: `menuList.project`,
          courseNum: "6",
          descriptionKey: 'menuList.business',
        },
        {
          icon: ``,
          titleKey: `menuList.route`,
          courseNum: "681+",
          descriptionKey: 'menuList.course',
        },
        {
          icon: ``,
          titleKey: `menuList.training`,
          courseNum: "13+",
          descriptionKey: "menuList.course",
        },
        {
          icon: ``,
          titleKey: `menuList.book`,
          courseNum: "",
          descriptionKey: "menuList.algorithmMaterial",
        }
      ].map(item => {
        return {
          ...item,
          showTitle: t(item.titleKey),
          showDescription: t(item.descriptionKey, {
            num: item.courseNum
          })
        }
      })
    )

    let cardList = reactive([
      {
        showTitle: '算法双周赛',
        showDescription: '综合测评个人能力',
        background: `./img/contest-card-bg1.png`,
        titleKey: 'algoContest',
        descriptionKey: 'algoContestDesc'
      },
      {
        showTitle: '编程实战赛',
        showDescription: '模拟实际工作场景',
        background: `./img/contest-card-bg2.png`,
        titleKey: 'programmingReal',
        descriptionKey: 'programmingRealDesc'
      },
      {
        showTitle: '百楼挑战赛',
        showDescription: '30天，用代码丈量你的成长',
        background: `./img/contest-card-bg3.png`,
        titleKey: 'hundredChallenge',
        descriptionKey: 'hundredChallengeDesc'
      },
      {
        showTitle: '蓝桥杯备赛专区',
        showDescription: '充电备考，6月夺冠',
        background: `./img/contest-card-bg4.png`,
        titleKey: 'lanqiaoPrepare',
        descriptionKey: 'lanqiaoPrepareDesc'
      },
    ].map(item => {
      return {
        ...item,
        showTitle: t(item.titleKey),
        showDescription: t(item.descriptionKey)
      }
    })
    )

    let navList = reactive([
      {
        titleKey: 'nav.study',
        isActive: true
      },
      {
        titleKey: 'nav.lanqiao',
        isActive: false
      },
      {
        titleKey: 'nav.work',
        isActive: false
      },
      {
        titleKey: 'nav.cert',
        isActive: false
      },
      {
        titleKey: 'nav.discuss',
        isActive: false
      },
      {
        titleKey: 'nav.schoolAndCompany',
        isActive: false
      },
    ].map(item => {
      return {
        ...item,
        showTitle: t(item.titleKey)
      }
    })
    )

    const handleUrlChange = () => {
      const lang = getUrlParams(location.href)?.lang ?? 'zh_CN' 
      theme.value = getUrlParams(location.href)?.theme ?? 'light'
      const { t } = createI18nInstance(lang)
      
      nationalContest.value = t('nationalContest')

      currentContest.value = t('currentContest')

      const newMenuList = menuList.map(item => {
        return {
          ...item,
          showTitle: t(item.titleKey),
          showDescription: t(item.descriptionKey, {
            num: item.courseNum
          })
        }
      })

      while (menuList.length) {
        menuList.pop();
      }

      menuList.push(...newMenuList)

      const newCardList = cardList.map(item => {
        return {
          ...item,
          showTitle: t(item.titleKey),
          showDescription: t(item.descriptionKey)
        }
      })

      while (cardList.length) {
        cardList.pop();
      }

      cardList.push(...newCardList)

      const newNavList = navList.map(item => {
        return {
          ...item,
          showTitle: t(item.titleKey)
        }
      })

      while (navList.length) {
        navList.pop();
      }

      navList.push(...newNavList)

    }
    return {
      menuList,
      cardList,
      nationalContest,
      currentContest,
      navList,
      theme,
      handleUrlChange
    }
  }
});

app.component('nav-bar', NavBar);
app.component('lq-menu', Menu);
app.component('card-group', CardGroup);

app.mount("#app")